<template>
  <div>
    {{ currentPath }}
    <el-container>
      <el-aside class="aside">
        <el-menu
          active-text-color="#ff0000"
          background-color="#222832"
          :default-openeds="[0]"
          text-color="#fff"
          :router="true"
        >
          <el-sub-menu
            v-for="(item, index) in menus"
            :key="item.id"
            :index="'' + index"
          >
            <template #title>
              <span>{{ item.title }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                v-for="sub in item.subArry"
                :key="sub.id"
                :class="{ active: currentPath === sub.path }"
                :index="sub.path"
              >
            
                <el-icon color="#409efc" size="20">
                  <component :is="sub.icon"></component>
                </el-icon>

                {{ sub.title }}
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header class="flexbetween boxshaow">
          <h1 class="title">{{ title }}</h1>
          <el-popover
            placement="bottom"
            :width="200"
            trigger="hover"
            content="this is content, this is content, this is content"
          >
            <section>
              <p>用户名:
                {{ userInfo.loginUserName }}
              </p>
              <p>
                昵称：
                {{ userInfo.nickName }}
              </p>
              <div>
                <el-button size="small" type="primary" @click.stop="goLogin">
                  退出
                </el-button>
              </div>
            </section>
            <template #reference>
              <div class="flex" @click="visible = !visible">
                <el-icon :size="20">
                  <Avatar></Avatar>
                </el-icon>

                <div class="nickname">
                  {{ userInfo.nickName }}
                </div>
              </div>
            </template>
          </el-popover>
        </el-header>
        <el-main class="main">
          <router-view></router-view>
        </el-main>
        <el-footer class="footer flexbetween boxshaow">
          Copyright © 2019-2021 
          {{ userInfo.nickName }}
          . All rights reserved.
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import {
  Location,
  Share,
  CirclePlus,
  Avatar,
  DataAnalysis,
} from "@element-plus/icons-vue";
import axios from "../ajax";
import { onMounted, reactive, ref, shallowRef,computed } from "vue";
import { useRoute, useRouter, onBeforeRouteUpdate } from "vue-router";

const route = useRoute();
const router = useRouter();
let currentPath = computed(() => {
  //  console.log( useRouter().currentRoute.value);
  return useRouter().currentRoute.value.path=="/index/category"?"/index/category?categoryLevel=1&parentId=0":useRouter().currentRoute.value.path
})
const activeroute = ref(""); //添加样式
const menus = reactive([
  //左侧导航数据
  {
    id: 1,
    title: "Dashboard",
    subArry: [
      {
        id: 1,
        title: "系统介绍",
        path: "/index/system",
        icon: shallowRef(DataAnalysis),
      },
      {
        id: 2,
        title: "Dashboard",
        path: "/index/dashboard",
        icon: shallowRef(Location),
      },
      {
        id: 3,
        title: "添加商品",
        path: "/index/addDoods",
        icon: shallowRef(CirclePlus),
      },
    ],
  },
  {
    id: 2,
    title: "首页配置",
    subArry: [
      {
        id: 1,
        title: "轮播图配置",
        path: "/index/loopimg",
        icon: shallowRef(DataAnalysis),
      }
    ],
  },
  {
    id:3,
    title:"模块管理",
    subArry:[
    {
        id: 1,
        title: "分类管理",
        path: "/index/category?categoryLevel=1&parentId=0",
        icon: shallowRef(DataAnalysis),
      }
    ]
  },
  {
    id:4,
    title:"系统管理",
    subArry:[
    {
        id: 1,
        title: "修改密码",
        path: "/index/user",
        icon: shallowRef(DataAnalysis),
      }
    ]
  },
  
]);
let title = ref("");
onMounted(() => {
  title.value = route.meta.title;

  activeroute.value =  route.path=="/index/category"?"/index/category?categoryLevel=1&parentId=0":route.path;
  // console.log(route);
  // ajax
  // getUserInfo();
  getUserInfo()
});



const visible = ref(false); //退出登录逻辑

onBeforeRouteUpdate((to, from) => {
  //更新路由渲染标题
  title.value = to.meta.title;
});

let goLogin = () => {
  localStorage.removeItem("token");
  router.replace("/login");
};

//   状态管理
import { userStore } from "../stores/user";
 const user_store=userStore();
 const userInfo=computed(()=>user_store.userInfo)//计算属性只读

 const {getUserInfo} =user_store;//不能使用storeToRefs解构函数，可以重起名字
</script>

<style lang="scss" scoped>
.aside {
  width: 200px;
  background: #222832;
  color: white;
  height: 100vh;
  text-align: center;
}
.boxshaow {
  box-shadow: 0 0 10px #999;
  .title {
    font-weight: bold;
  }
}
.main {
  height: 50vh !important;
}
.nickname {
  min-width: 50px;
}
.active{
  // background: yellow;
  color: red;
}
</style>